{% extends "Industrial_Logs/base.html" %} {% block header %} {% endblock header %} {% block content %}

    <div id="back" class="main" style="height:90%;">

    <h1 style="color:wheat;text-align: center;font-family:cursive;font-weight:700;top:-20px;position: relative;top: 40px;">Hadoop平台</h1>

    <div id="layer02" class="layer" style="height:15%;">
        <div id="layer02_01" style="width:20%;">
            <div class="layer02-data">
                <span style="font-size:26px;">1</span>
                <span style="font-size:16px;">台</span>
            </div>
            <canvas width="200" height="100"></canvas>
        </div>
        <div id="layer02_02" style="width:20%;">
{#            <div class="layer02-data">#}
{#                <span style="font-size:26px;">{{aa1}}</span>#}
{#                <span style="font-size:16px;">℃</span>#}
{#            </div>#}
            <canvas width="200" height="100"></canvas>
        </div>
        <div id="layer02_03" style="width:21%;">
{#            <div class="layer02-data">#}
{#                <span style="font-size:26px;">{{aa2}}</span>#}
{#                <span style="font-size:16px;">%rh</span>#}
{#            </div>#}
            <canvas width="200" height="100"></canvas>
        </div>
        <div id="layer02_04" style="width:12%;">
            <div class="layer02-data">
                <span style="font-size:26px;">20</span>
                <span style="font-size:16px;">G</span>
            </div>
            <canvas width="120" height="100"></canvas>
        </div>
        <div id="layer02_05" style="width:12%;">
{#            <div class="layer02-data">#}
{#                <span style="font-size:26px;">25</span>#}
{#                <span style="font-size:16px;">个</span>#}
{#            </div>#}
            <canvas width="120" height="100"></canvas>
        </div>
        <div id="layer02_06" style="width:12%;">
            <div class="layer02-data">
                <span style="font-size:26px;">5</span>
                <span style="font-size:16px;">个</span>
            </div>
            <canvas width="120" height="100"></canvas>
        </div>
    </div>
    <div id="layer03" class="layer" style="height:40%;">
        <div id="layer03_left" style="width:48%;" class="layer03-panel">
            <div id="layer03_left_01" class="layer03-left-chart" style="width:16%;">
                <canvas width="100" height="200" style="margin:30px 0 0 20px;"></canvas>
            </div>
            <div id="layer03_left_02" class="layer03-left-chart" style="width:80%;"></div>

        </div>
        <div id="layer03_right" style="width:50%;" class="layer03-panel">
            <div id="layer03_right_label">存储</div>
            <div id="layer03_right_chart01" class="layer03-right-chart">
                <canvas width="130" height="150" style="margin:40px 0 0 20px;"></canvas>
                <div class="layer03-right-chart-label">Hdfs</div>
            </div>
{#            <div id="layer03_right_chart02" class="layer03-right-chart">#}
{#                <canvas width="130" height="150" style="margin:40px 0 0 20px;"></canvas>#}
{#                <div class="layer03-right-chart-label">Rdbms</div>#}
{#            </div>#}
{#            <div id="layer03_right_chart03" class="layer03-right-chart">#}
{#                <canvas width="130" height="150" style="margin:40px 0 0 20px;"></canvas>#}
{#                <div class="layer03-right-chart-label">Rdies</div>#}
{#            </div>#}
        </div>
    </div>
    <div id="layer04" class="layer" style="height:30%;">
        <div id="layer04_right" class="layer04-panel">
            <div id="layer04_right_label" class="layer04-panel-label">
                <span>集群性能/</span><span style="color:#00A09A;">近一个小时</span>
            </div>
            <div id="layer04_right_chart" class="layer04-panel-chart"></div>
        </div>
    </div>
</div>
<script>
    $(function () {
            drawLayer02Label($("#layer02_01 canvas").get(0), "接入终端数量", 80, 200);
            drawLayer02Label($("#layer02_02 canvas").get(0), "当前温度数据", 80, 300);
            drawLayer02Label($("#layer02_03 canvas").get(0), "当前湿度数据", 80, 400);
            drawLayer02Label($("#layer02_04 canvas").get(0), "总存储数据", 50, 200);
            drawLayer02Label($("#layer02_05 canvas").get(0), "当前任务个数", 40, 200);
            drawLayer02Label($("#layer02_06 canvas").get(0), "当前集群数", 50, 200);

            renderLegend();

            //饼状图
            renderChartBar01();
            //renderChartBar02();

            //存储
            renderLayer03Right();

            //30天日均线流量趋势
            renderLayer04Left();

            //集群性能
            renderLayer04Right();

    })
    </script>
{#<div id="realdevtem" class="chart-container" style="top:20px;left:200px;width:1000px; height:650px;">#}
{#1111#}
{#</div>#}
{##}
{#<script type="text/javascript">#}
{#    window.onload = function() {#}
{#        //获取dom容器#}
{#        var myChart = echarts.init(document.getElementById('realdevtem'));#}
{#        //指定图表的配置项和数据#}
{##}
{#        var devdata;#}
{#        var disdata = [''];#}
{##}
{#        function get_dev_temp() {#}
{#            $.get("/get_dev_temp", function(data) {#}
{#                devdata = JSON.parse(data);#}
{#            });#}
{#        }#}
{#        get_dev_temp();#}
{##}
{##}
{##}
{#        option = {#}
{#            title: {#}
{#                text: '设备温度实时数据'#}
{#            },#}
{#            tooltip: {#}
{#                trigger: 'axis',#}
{#                axisPointer: {#}
{#                    animation: false#}
{#                }#}
{#            },#}
{#            xAxis: {#}
{#                name: '时间（s）',#}
{#                type: 'time',#}
{#                splitLine: {#}
{#                    show: false#}
{#                }#}
{#            },#}
{#            yAxis: {#}
{#                name: '温度(℃)',#}
{#                type: 'value',#}
{#                boundaryGap: [0, '100%'],#}
{#                splitLine: {#}
{#                    show: false#}
{#                }#}
{#            },#}
{##}
{#            series: [{#}
{#                name: '设备温度数据',#}
{#                type: 'line',#}
{#                showSymbol: false,#}
{#                hoverAnimation: false,#}
{#                data: disdata#}
{#            }]#}
{#        }#}
{##}
{##}
{#        if (option && typeof option === "object") {#}
{#            myChart.setOption(option, true);#}
{#        }#}
{##}
{##}
{#        setInterval(function() {#}
{#            get_dev_temp();#}
{#            var date = devdata.Date#}
{#            var time = devdata.Time;#}
{#            var temp = devdata.dev_tem;#}
{#            var temdata = date + " " + time#}
{#            console.log(temdata);#}
{#            console.log(temp);#}
{#            console.log(disdata.length);#}
{#            if (disdata.length > 20) {#}
{#                disdata.shift();#}
{#                disdata.push({#}
{#                    name: temdata,#}
{#                    value: [temdata, temp]#}
{#                });#}
{#                myChart.setOption({#}
{#                    series: [{#}
{#                        data: disdata#}
{#                    }]#}
{#                });#}
{#            } else {#}
{#                disdata.push({#}
{#                    name: temdata,#}
{#                    value: [temdata, temp]#}
{#                });#}
{#                myChart.setOption({#}
{#                    series: [{#}
{#                        data: disdata#}
{#                    }]#}
{#                });#}
{#            }#}
{##}
{#        }, 20000);#}
{#    }#}
{#</script>#}
{% endblock content %}